<template>
    <div class="login-box">
      <van-form @submit="onSubmit" class="log-on">
        <div class="log-tityou" @click="router.push('/l/regis')">注册</div>
        <div class="log-title">密码登录</div>
        <van-cell-group inset>
          <van-field v-model="forms.username" name="用户名" placeholder="用户名：sanzu" />
          <van-field v-model="forms.password" type="password" name="密码" placeholder="密码：sanzu" />
        </van-cell-group>
        <div style="float: right;font-size: 12px; padding: 10px;color:#999999;">忘记密码？</div>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" style="margin-top:40px;">
            提交
          </van-button>
        </div>
        <div style="text-align: center;font-size: 14px;color: #666EE8;margin-top: 20px;" @click="router.push('/l/mobs')">免密登录</div>
      </van-form>
    </div>
</template>

<script setup>
import { ref,reactive } from 'vue'
import { closeToast, showLoadingToast ,showToast } from 'vant';
import {useRouter} from 'vue-router'
import {getLogin} from '@/api/index.js'

const router=useRouter()
const forms=reactive({
  username:'',
  password:''
})
const onSubmit =async (values) => {
  if(values.用户名&&values.密码){
    const {accessToken,refreshToken,user,nickname,code,message}=await getLogin(forms)
    if(code===200){
      showLoadingToast('验证中...');
      setTimeout(() => {
        closeToast();
        showToast(message);
        localStorage.setItem("access_token",accessToken)
        localStorage.setItem("refresh_token",refreshToken)
        setTimeout(()=>{
          router.push('/home')
        },1000)
      }, 1000);
    }else if(code===401){
      showToast(message);
    }else if(code===402){
      showToast(message);
    }
  }else{
    showLoadingToast('验证中...');
    setTimeout(() => {
      closeToast();
      showToast('登陆失败！！！');
    }, 2000);
  }
};

</script>

<style lang="scss" scoped>
  .login-box {
    height: 270px;
    width: 330px;
    background-color: #FFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;

    .log-on {
      height: 200px;
      width: 335px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .log-title {
    text-align: center;
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: bold;
    color: #fff;
  }
  .log-tityou {
    text-align: center;
    position: absolute;
    top: -60%;
    left: 90%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #fff;
  }
</style>